<template>
	<!-- 加载中 -->
	<uni-load-more :status="loadingStatus" v-if="isLoading" />

	<!-- 已加载 -->
	<!-- 任务列表滚动视图容器 -->
	<scroll-view v-else :style="{ paddingTop: safeDistance + 'px' }" class="task-app-container" scroll-y enable-flex
		refresher-enabled="true" refresher-threshold="45" refresher-bg="#f9f9f9" refresher-color="#4CAF50"
		@refresherrefresh="onRefresh" :refresher-triggered="isRefresher" @click="closeAllMenus">

		<!-- 引入用户概览组件 - 包装在框子背景中 -->
		<view class="user-overview-container">
			<user-overview :totalTasks="totalTasks" :studyTasks="studyTasks" :houseworkTasks="houseworkTasks"
				:completedTasks="completedTasks" :completedRate="completedRate" />
		</view>

		<!-- 主要内容区域 -->
		<view class="task-content">
			<!-- 标签选择器 -->
			<view class="tag-selector-wrapper">
				<view class="tag-selector-header">
					<text class="tag-selector-title">📋 任务分类</text>
					<text class="task-count">{{ filteredTasks.length }} 个任务</text>
				</view>
				<view class="tag-selector">
					<view v-for="tag in tagOptions" :key="tag.value" class="tag-item"
						:class="{ active: selectedTag === tag.value }" @click="handleTagSelection(tag.value)">
						<text class="tag-icon">{{ tag.icon }}</text>
						<text class="tag-text">{{ tag.label }}</text>
					</view>
				</view>
			</view>

			<!-- 任务列表 -->
			<view class="task-list">
				<!-- 空状态提示 -->
				<view v-if="filteredTasks.length === 0" class="empty-state">
					<text class="empty-icon">📝</text>
					<text class="empty-title">暂无任务</text>
					<text class="empty-desc">点击右下角"+"按钮添加新任务</text>
				</view>

				<!-- 任务项 -->
				<view v-for="(task, index) in filteredTasks" :key="task.id" class="task-item-wrapper">
					<view class="task-item" :class="{ 'task-item-completed': task.status === 1 }"
						hover-class="task-item-hover" hover-start-time="0" hover-stay-time="80">

						<!-- 渐变背景装饰 -->
						<view class="task-bg-decoration"></view>

						<!-- 顶部：任务图标 + 完成徽章 -->
						<view class="task-header">
							<view class="task-icon-container">
								<view class="task-icon-glow"></view>
								<view class="task-icon-wrapper">
									<image class="task-icon-image" :src="`${baseURL}${task.icon}`" mode="aspectFill">
									</image>
								</view>
								<view v-if="task.status === 1" class="task-completed-badge">
									<text class="badge-icon">✓</text>
								</view>
							</view>
						</view>

						<!-- 中间：任务信息 -->
						<view class="task-body">
							<!-- 任务名称 -->
							<text class="task-title">{{ task.taskName }}</text>

							<!-- 任务元信息 - 重新设计 -->
							<view class="task-meta">
								<view class="meta-badge tag-badge"
									:class="task.tags === '学习' ? 'tag-study' : 'tag-housework'">
									<text class="meta-icon">{{ task.tags === '学习' ? '📚' : '🏠' }}</text>
									<text class="meta-text">{{ task.tags }}</text>
								</view>
								<view class="meta-badge score-badge">
									<text class="score-icon">⭐</text>
									<text class="score-text">{{ task.score }}分</text>
								</view>
							</view>
						</view>

						<!-- 底部：操作按钮 - 优化布局 -->
						<view class="task-footer">
							<view class="task-actions" :class="{ 'expanded': activeMenuId === task.id }">
								<!-- 完成/已完成按钮 -->
								<view v-if="task.status === 1" class="task-btn task-completed-btn"
									:class="{ 'compact': activeMenuId === task.id }">
									<view class="btn-content">
										<text class="btn-icon">✓</text>
										<text class="btn-label">已完成</text>
									</view>
								</view>

								<button v-else class="task-btn task-complete-btn"
									:class="{ 'compact': activeMenuId === task.id }"
									@click.stop="handleCompleteTask(task.id)">
									<view class="btn-content">
										<text class="btn-icon">✓</text>
										<text class="btn-label">完成</text>
									</view>
								</button>

								<!-- 编辑和删除按钮 - 展开时显示 -->
								<template v-if="activeMenuId === task.id">
									<button class="task-btn-icon task-edit-btn" @click.stop="handleEditTask(task)">
										<text class="btn-icon">✏️</text>
									</button>

									<button class="task-btn-icon task-delete-btn"
										@click.stop="handleDeleteTask(task.id)">
										<text class="btn-icon">🗑️</text>
									</button>
								</template>

								<!-- 更多操作菜单 - 三个点按钮 -->
								<view class="task-more-menu">
									<button class="task-more-btn" @click.stop="toggleMoreMenu(task.id)">
										<text class="more-dots">⋯</text>
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>

	<!-- 任务表单组件 -->
	<task-form ref="taskForm" @task-added="onTaskAdded" />

</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue';
	import UserOverview from '@/components/user-overview.vue';
	import { completeTaskAPI, deleteTaskAPI, listTaskAPI } from '@/services/task';
	import { TaskItem } from '@/types';
	import TaskForm from './form.vue';
	import { baseURL } from '@/utils/config';
	import { getThemeStyles } from '@/stores/theme';
	/**
	 * 安全距离（顶部内边距 = 安全区域 + 基础间距）
	 */
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		// 基础间距 20px（约等于 40rpx），加上安全区域
		return safeAreaTop + 20;
	});

	/**
	 * 加载状态 - 控制加载指示器显示
	 */
	const isLoading = ref(false);

	/**
	 * 加载状态文本 - 用于uni-load-more组件
	 */
	const loadingStatus = ref('more');
	/**
	 * 任务列表数据 - 存储从API获取的所有任务
	 */
	const tasks = ref<TaskItem[]>([]);

	/**
	 * 刷新状态 - 控制下拉刷新动画
	 */
	const isRefresher = ref(false);

	/**
	 * 标签选项配置
	 */
	const tagOptions = ref([
		{ value: '学习', label: '学习', icon: '✏️' },
		{ value: '家务', label: '家务', icon: '🏠' },
		{ value: '全部', label: '全部', icon: '📚' }
	]);

	/**
	 * 选中的标签 - 用于筛选任务列表
	 */
	const selectedTag = ref('学习');

	/**
	 * 当前激活的更多菜单ID - 用于控制哪个任务的菜单显示
	 */
	const activeMenuId = ref<number | null>(null);

	/**
	 * 总任务数
	 */
	const totalTasks = ref(0);

	/**
	 * 学习任务数
	 */
	const studyTasks = ref(0);

	/**
	 * 家务任务数
	 */
	const houseworkTasks = ref(0);

	/**
	 * 已完成任务数
	 */
	const completedTasks = ref(0);

	/**
	 * 任务完成率
	 */
	const completedRate = ref(0);

	/**
	 * 根据选中的标签过滤任务列表
	 */
	const filteredTasks = computed(() => {
		if (selectedTag.value === '全部') {
			return tasks.value;
		} else {
			return tasks.value.filter(task => task.tags === selectedTag.value);
		}
	});

	/**
	 * 计算任务统计数据
	 * @description 当任务数据变化时主动计算各项统计数据
	 */
	const calculateTaskStats = () => {
		const taskList = tasks.value;

		// 计算总任务数
		totalTasks.value = taskList.length;

		// 计算各类型任务数
		studyTasks.value = taskList.filter(task => task.tags === '学习').length;
		houseworkTasks.value = taskList.filter(task => task.tags === '家务').length;

		// 计算已完成任务数
		completedTasks.value = taskList.filter(task => task.status === 1).length;

		// 计算完成率
		completedRate.value = totalTasks.value === 0 ? 0 : completedTasks.value / totalTasks.value;
	};

	/**
	 * 获取当前主题样式
	 */
	const themeStyles = computed(() => getThemeStyles());

	/**
	 * 处理标签选择
	 * @param tag 标签名称
	 */
	const handleTagSelection = (tag : string) => {
		selectedTag.value = tag;
	};

	/**
	 * 切换更多菜单显示状态
	 * @param taskId 任务ID
	 */
	const toggleMoreMenu = (taskId : number) => {
		// 如果点击的是当前激活的菜单，则关闭菜单
		if (activeMenuId.value === taskId) {
			activeMenuId.value = null;
		} else {
			// 否则显示当前任务的菜单，同时关闭其他菜单
			activeMenuId.value = taskId;
		}
	};

	/**
	 * 关闭所有菜单
	 */
	const closeAllMenus = () => {
		if (activeMenuId.value !== null) {
			activeMenuId.value = null;
		}
	};

	// 任务表单组件引用
	const taskForm = ref();

	/**
	 * 获取任务数据
	 * 包装实际的API调用，提供数据获取功能
	 */
	const getTaskData = async () => {
		try {
			// 调用后端API获取任务数据
			const response = await listTaskAPI();
			// 转换数据格式以匹配组件需求
			tasks.value = response.data;
			// 主动计算统计数据
			calculateTaskStats();
		} catch (error) {
			console.error('加载任务数据失败:', error);
			uni.showToast({
				title: '加载任务数据失败',
				icon: 'none'
			});
		}
	};

	/**
	 * 处理添加新任务 - 打开弹窗
	 */
	const handleAddTask = async () => {
		// 调用表单组件的打开弹窗方法
		taskForm.value.addTask();
	};

	/**
	 * 任务添加成功后的处理函数
	 * 用于刷新任务列表
	 */
	const onTaskAdded = async () => {
		// 刷新任务列表
		await getTaskData();
	};

	/**
	 * 处理完成任务
	 * @param taskId 任务ID
	 */
	const handleCompleteTask = async (taskId : number) => {
		try {
			// 在实际应用中，这里可以调用API标记任务为已完成
			await completeTaskAPI(taskId);

			// 刷新任务列表
			await getTaskData();

			uni.showToast({
				title: '任务已完成',
				icon: 'success'
			});
		} catch (error) {
			uni.showToast({
				title: '完成任务失败',
				icon: 'none'
			});
		}
	};




	/**
	 * 处理编辑任务
	 * @param task 任务对象
	 */
	const handleEditTask = (task : TaskItem) => {
		// 关闭菜单
		activeMenuId.value = null;
		// 打开编辑表单
		taskForm.value?.editTask(task);
	};

	/**
	 * 处理删除任务
	 * @param taskId 任务ID
	 */
	const handleDeleteTask = async (taskId : number) => {
		// 关闭菜单
		activeMenuId.value = null;

		// 显示确认对话框
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这个任务吗？',
			async success(res) {
				if (res.confirm) {
					try {
						await deleteTaskAPI(taskId)
						await getTaskData()
						uni.showToast({
							title: '任务已删除',
							icon: 'success'
						});
					} catch (error) {
						uni.showToast({
							title: '删除任务失败',
							icon: 'none'
						});
					}
				}
			}
		});
	};

	/**
	 * 组件挂载时加载任务数据
	 */
	onMounted(async () => {
		// 开启加载状态
		isLoading.value = true;
		loadingStatus.value = 'loading';
		try {
			await getTaskData();
		} finally {
			// 数据加载完成后关闭加载状态
			isLoading.value = false;
			loadingStatus.value = 'more';
		}
	});

	/**
	 * 下拉刷新处理函数
	 */
	const onRefresh = async () => {
		isRefresher.value = true;
		try {
			// 重新获取任务数据
			await getTaskData();
		} finally {
			// 使用setTimeout确保有足够的刷新动画展示时间
			setTimeout(() => {
				isRefresher.value = false;
			}, 500);
		}
	};
</script>

<style lang="scss">
	/**
	 * 任务应用主容器 - scroll-view样式
	 */
	.task-app-container {
		height: 100vh;
		background-color: v-bind('themeStyles.bgPrimary');
	}

	/**
	 * 用户概览组件容器样式
	 */
	.user-overview-container {
		border-radius: 6px;
		border: 1px solid v-bind('themeStyles.borderLight');
		margin: 10px;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
	}

	/**
	 * 主要内容区域
	 */
	.task-content {
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		min-height: 100%;
		margin: 20rpx;
		border-radius: 16rpx;
		border: 1rpx solid v-bind('themeStyles.borderLight');
		background: v-bind('themeStyles.bgCard');
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		position: relative;
		overflow: hidden;


	}

	/**
	 * 标签选择器包装器
	 */
	.tag-selector-wrapper {
		margin-bottom: 24rpx;
		padding: 20rpx;
		background: v-bind('themeStyles.bgSecondary');
		border-radius: 12rpx;
		border: 1rpx solid v-bind('themeStyles.borderLight');
	}

	.tag-selector-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.tag-selector-title {
		font-size: 28rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.task-count {
		font-size: 24rpx;
		color: v-bind('themeStyles.textTertiary');
		padding: 4rpx 12rpx;
		background: v-bind('themeStyles.accentBg');
		border-radius: 12rpx;
		border: 1rpx solid v-bind('themeStyles.accentBorder');
	}

	/**
	 * 标签选择器样式
	 */
	.tag-selector {
		display: flex;
		gap: 12rpx;
	}

	/**
	 * 标签项样式
	 */
	.tag-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		padding: 16rpx 12rpx;
		background: v-bind('themeStyles.bgCard');
		color: v-bind('themeStyles.textSecondary');
		border: 2rpx solid v-bind('themeStyles.borderLight');
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;

		&:active {
			transform: scale(0.96);
		}
	}

	.tag-icon {
		font-size: 36rpx;
		transition: transform 0.3s ease;
	}

	.tag-text {
		font-size: 24rpx;
	}

	.tag-item.active {
		color: white;
		background: v-bind('themeStyles.primaryGradient');
		border-color: v-bind('themeStyles.primaryColor');
		box-shadow: v-bind('themeStyles.activeShadow');
		transform: translateY(-2rpx);

		.tag-icon {
			transform: scale(1.1);
		}
	}

	/**
	 * 任务列表 - 两列Grid布局
	 */
	.task-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	/**
	 * 空状态样式
	 */
	.empty-state {
		grid-column: 1 / -1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		gap: 20rpx;
	}

	.empty-icon {
		font-size: 120rpx;
		opacity: 0.5;
		animation: emptyFloat 3s ease-in-out infinite;
	}

	.empty-title {
		font-size: 32rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.empty-desc {
		font-size: 26rpx;
		color: v-bind('themeStyles.textTertiary');
		text-align: center;
	}

	@keyframes emptyFloat {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
		}
	}

	/**
	 * 任务项包装器
	 */
	.task-item-wrapper {
		animation: taskFadeIn 0.4s ease-out;
		position: relative;
		overflow: visible;
	}

	@keyframes taskFadeIn {
		from {
			opacity: 0;
			transform: translateY(10rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/**
	 * 任务项 - 卡片样式（垂直布局）
	 */
	.task-item {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: v-bind('themeStyles.bgCard');
		border: 2rpx solid v-bind('themeStyles.borderLight');
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		min-height: 320rpx;
		width: 100%;
		box-sizing: border-box;
	}

	/* 渐变背景装饰 */
	.task-bg-decoration {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		background: v-bind('themeStyles.primaryGradient');
		opacity: 0.03;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.task-item-hover {
		transform: translateY(-6rpx) scale(1.02);
		box-shadow: 0 12rpx 28rpx rgba(0, 0, 0, 0.12);
		border-color: v-bind('themeStyles.accentColor');

		.task-bg-decoration {
			opacity: 0.08;
		}

		.task-icon-glow {
			opacity: 0.4;
			transform: scale(1.2);
		}
	}

	/**
	 * 已完成任务样式
	 */
	.task-item-completed {
		background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
		border: 2rpx solid rgba(16, 185, 129, 0.3);

		.task-bg-decoration {
			background: linear-gradient(135deg, rgba(16, 185, 129, 0.8) 0%, rgba(5, 150, 105, 0.6) 100%);
			opacity: 0.08;
		}

		.task-title {
			text-decoration: line-through;
			opacity: 0.7;
		}
	}

	/**
	 * 顶部：任务图标区域
	 */
	.task-header {
		display: flex;
		justify-content: center;
		margin-bottom: 16rpx;
		margin-top: 8rpx;
	}

	.task-icon-container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 图标发光效果 */
	.task-icon-glow {
		position: absolute;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: v-bind('themeStyles.primaryGradient');
		opacity: 0.2;
		filter: blur(20rpx);
		transition: all 0.3s ease;
		animation: glowPulse 3s ease-in-out infinite;
	}

	@keyframes glowPulse {

		0%,
		100% {
			transform: scale(1);
			opacity: 0.2;
		}

		50% {
			transform: scale(1.1);
			opacity: 0.3;
		}
	}

	.task-icon-wrapper {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
		background: linear-gradient(135deg, v-bind('themeStyles.bgSecondary') 0%, v-bind('themeStyles.bgPrimary') 100%);
		border: 3rpx solid v-bind('themeStyles.accentColor');
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.5);
		z-index: 1;
		transition: all 0.3s ease;
	}

	.task-icon-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.task-completed-badge {
		position: absolute;
		bottom: -6rpx;
		right: -6rpx;
		width: 40rpx;
		height: 40rpx;
		background: v-bind('themeStyles.successColor');
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3rpx solid v-bind('themeStyles.bgCard');
		box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.4);
		animation: badgePop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		z-index: 2;
	}

	.badge-icon {
		color: white;
		font-size: 20rpx;
		font-weight: bold;
	}

	@keyframes badgePop {
		0% {
			transform: scale(0) rotate(-180deg);
		}

		50% {
			transform: scale(1.2) rotate(10deg);
		}

		100% {
			transform: scale(1) rotate(0deg);
		}
	}

	/**
	 * 中间：任务信息区域
	 */
	.task-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		margin-bottom: 12rpx;
		position: relative;
		z-index: 1;
	}

	.task-title {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textPrimary');
		line-height: 1.4;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		min-height: 78rpx;
		letter-spacing: 0.5rpx;
	}

	/**
	 * 任务元信息 - 徽章样式
	 */
	.task-meta {
		display: flex;
		gap: 10rpx;
		flex-wrap: wrap;
		justify-content: center;
	}

	.meta-badge {
		display: flex;
		align-items: center;
		gap: 6rpx;
		padding: 8rpx 14rpx;
		border-radius: 12rpx;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	/* 标签徽章 */
	.tag-badge {
		border: 2rpx solid transparent;

		&.tag-study {
			background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.08) 100%);
			border-color: rgba(59, 130, 246, 0.3);
			color: #2563eb;
		}

		&.tag-housework {
			background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(219, 39, 119, 0.08) 100%);
			border-color: rgba(236, 72, 153, 0.3);
			color: #db2777;
		}
	}

	/* 分数徽章 */
	.score-badge {
		background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
		border: 2rpx solid rgba(251, 191, 36, 0.3);
	}

	.meta-icon {
		font-size: 22rpx;
	}

	.meta-text {
		font-size: 22rpx;
		font-weight: 600;
	}

	.score-icon {
		font-size: 22rpx;
	}

	.score-text {
		font-size: 24rpx;
		font-weight: 700;
		background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	/**
	 * 底部：操作按钮区域
	 */
	.task-footer {
		margin-top: auto;
		position: relative;
		z-index: 1;
	}

	/**
	 * 横向按钮容器
	 */
	.task-actions {
		display: flex;
		flex-direction: row;
		gap: 8rpx;
		justify-content: space-between;
		align-items: center;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		width: 100%;
		overflow: hidden;

		&.expanded {
			gap: 4rpx;
			justify-content: space-between;

			.task-more-menu {
				margin-left: auto;
			}
		}
	}

	/**
	 * 主要按钮样式（完成/已完成）
	 */
	.task-btn {
		flex: 1;
		height: 64rpx;
		padding: 0 16rpx;
		border: none;
		border-radius: 14rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;

		&:active {
			transform: scale(0.96);
		}

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.3);
			transition: left 0.5s ease;
		}

		&:active:before {
			left: 100%;
		}

		&.compact {
			flex: 0 0 auto;
			min-width: 100rpx;
			height: 48rpx;
			padding: 0 8rpx;
			font-size: 22rpx;

			.btn-label {
				font-size: 20rpx;
			}

			.btn-icon {
				font-size: 20rpx;
			}
		}
	}

	.btn-content {
		display: flex;
		align-items: center;
		gap: 6rpx;
	}

	.btn-icon {
		font-size: 24rpx;
	}

	.btn-label {
		font-size: 24rpx;
		font-weight: 600;
	}

	/**
	 * 完成按钮
	 */
	.task-complete-btn {
		background: v-bind('themeStyles.primaryGradient');
		box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.3);

		.btn-icon,
		.btn-label {
			color: white;
		}

		&:active {
			box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
		}
	}

	/**
	 * 已完成按钮
	 */
	.task-completed-btn {
		background: linear-gradient(135deg, v-bind('themeStyles.successColor') 0%, #059669 100%);
		box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.3);

		.btn-icon,
		.btn-label {
			color: white;
		}
	}

	/**
	 * 图标按钮样式（编辑、删除）
	 */
	.task-btn-icon {
		width: 48rpx;
		height: 48rpx;
		padding: 0;
		border: none;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		flex-shrink: 0;
		animation: slideInRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		transform-origin: center;

		&:active {
			transform: scale(0.9) rotate(5deg);
		}

		.btn-icon {
			font-size: 20rpx;
		}
	}

	/**
	 * 编辑按钮
	 */
	.task-edit-btn {
		background: linear-gradient(135deg, v-bind('themeStyles.warningColor') 0%, v-bind('themeStyles.infoColor') 100%);
		box-shadow: 0 4rpx 12rpx rgba(237, 137, 54, 0.3);

		.btn-icon {
			color: white;
		}

		&:active {
			box-shadow: 0 2rpx 8rpx rgba(237, 137, 54, 0.2);
		}
	}

	/**
	 * 删除按钮
	 */
	.task-delete-btn {
		background: linear-gradient(135deg, v-bind('themeStyles.errorColor') 0%, #f87171 100%);
		box-shadow: 0 4rpx 12rpx rgba(245, 101, 101, 0.3);

		.btn-icon {
			color: white;
		}

		&:active {
			box-shadow: 0 2rpx 8rpx rgba(245, 101, 101, 0.2);
		}
	}

	/**
	 * 更多操作菜单样式
	 */
	.task-more-menu {
		position: relative;
		flex-shrink: 0;
	}

	/**
	 * 三个点按钮样式
	 */
	.task-more-btn {
		width: 48rpx;
		height: 48rpx;
		padding: 0;
		border: none;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: v-bind('themeStyles.bgSecondary');
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		flex-shrink: 0;

		&:active {
			transform: scale(0.9);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}
	}

	/* 展开状态下的三个点按钮 */
	.task-actions.expanded .task-more-btn {
		background: linear-gradient(135deg, v-bind('themeStyles.primaryColor') 0%, v-bind('themeStyles.accentColor') 100%);
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);

		.more-dots {
			color: white;
			transform: rotate(90deg);
		}
	}

	.more-dots {
		font-size: 24rpx;
		font-weight: bold;
		color: v-bind('themeStyles.textTertiary');
		line-height: 1;
		transform: rotate(90deg);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}



	/**
	 * 菜单滑入动画
	 */
	@keyframes menuSlideIn {
		0% {
			opacity: 0;
			transform: translateY(-15rpx) scale(0.9);
		}

		60% {
			opacity: 0.8;
			transform: translateY(2rpx) scale(1.02);
		}

		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	/**
	 * 按钮从右侧滑入动画
	 */
	@keyframes slideInRight {
		0% {
			opacity: 0;
			transform: translateX(30rpx) scale(0.8);
		}

		60% {
			opacity: 0.8;
			transform: translateX(-2rpx) scale(1.05);
		}

		100% {
			opacity: 1;
			transform: translateX(0) scale(1);
		}
	}
</style>